<template>
  <a :href="setupOption.jumpUrl" :target="setupOption.jumpMode" style="text-decoration: none">
    <div class="text" :style="computedStyle">
      {{ setupOption.text }}
    </div>
  </a>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import type { CSSProperties } from 'vue'

// Props
const props = defineProps<{
  widgetOptions: any
  isPreview?: Boolean
}>()

const emit = defineEmits([])

const setupOption = computed(() => {
  return props.widgetOptions.setup
})

// 计算样式
const computedStyle = computed<CSSProperties>(() => ({
  color: setupOption.value.color,
  fontWeight: setupOption.value.fontWeight,
  fontSize: `${setupOption.value.fontSize}px`,
  letterSpacing: `${setupOption.value.letterSpacing}em`,
  backgroundColor: setupOption.value.backgroundColor,
  textAlign: setupOption.value.textAlign,
  whiteSpace: setupOption.value.whiteSpace ? 'pre-line' : 'normal'
}))
</script>

<style scoped lang="scss">
.text {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
</style>
